*{
  margin: 0;
  padding: 0;
}

body{
  width: 100vw;
  height: 100vh;
}

//定义一个混合
// .center-circle{
//   position: absolute;
//   top: 0;
//   bottom: 0;
//   left: 0;
//   right: 0;
//   margin: auto;
//   border-radius: 50%;
// }

//定义一个不带输出的混合
.center-circle(){
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 50%;
}

//定义一个混合
.box(@w, @h, @bg: rgb(70, 16, 16)){
  width: @w * 1px;
  height: @h * 1px;
  background: @bg;
}

.box1{
  .box(300, 300, rgb(192, 164, 235));
  //使用混合 调用混合
  .center-circle();

  .box2{
    .box(200, 200, rgb(186, 124, 199));
    .center-circle();

    .box3{
      .box(100, 100); 
      .center-circle();
    }
  }
}